<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper {
            width: 720px;
            height: 480px;
            margin: 100px auto;
            position: relative;
        }
        .left,.right {
            height: 50px;
            width: 25px;
            background-color: rgba(0, 0, 0, 0.167);
            position: absolute;
            font-size: 30px;
            color: rgba(255, 255, 255, 0.51);
            top: 50%;
            margin-top: -25px;   /* transform: translateY(-50%); */
            text-align: center;
            line-height: 50px;
        }
        .left{
            left: 0;      
        }
        .right {
            right: 0;
        }
        .dot ul{
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .dot ul li{
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.451);
            list-style: none;
            margin-right: 10px;
            border-radius: 50%;
        }
        .image{
            position: relative;
            height: 100%;
        }
        .image img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            opacity: 0;
            transition: all 2s;
        }
        .image img.active{
            opacity: 1;
        }
        .dot li.active{
            background-color: rgb(45, 201, 45);
        }
        
    </style>
</head>

<body>
    <div class="swiper swiper1">
        <div class="image">
        </div>
        <div class="left"><</div>
        <div class="right">></div>
        <div class="dot">
            <ul>
            </ul>
        </div>
    </div> 
</body>

</html>
<script>
    class Swiper{
        constructor(el,data){
            this.dom=document.querySelector(el)
            this.data=data
            this.index=0
            this.timerid=null
            this.render()
            this.autoplay()
            this.bindevent()
        }
        render(){
            let str=this.data.map((item,index)=>{
                return `<img src="${item}">`
            }).join('')
            
            this.dom.querySelector('.image').innerHTML=str
            let str1=this.data.map((item,index)=>{
                return `<li></li>`
            }).join('')
            this.dom.querySelector('.dot ul').innerHTML=str1
        }
        autoplay(){
            this.timerid=setInterval(()=>{
                this.dom.querySelectorAll('.image img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.remove('active')
                this.index++
                if(this.index > this.data.length-1){
                    this.index=0
                }
                this.dom.querySelectorAll('.image img')[this.index].classList.add('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.add('active')
                
            },2000)
        }
        bindevent(){

            //鼠标划入停止轮播
            this.dom.onmouseover=(()=>{
                clearInterval(this.timerid)
            })
            //鼠标划出继续轮播
            this.dom.onmouseout=(()=>{
                this.autoplay()
            })

            this.dom.querySelector('.left').onclick=()=>{
                clearInterval(this.timerid)
                this.dom.querySelectorAll('.image img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.remove('active')
                this.index--
                if(this.index <= 0){
                    this.index=this.data.length-1
                }
                this.dom.querySelectorAll('.image img')[this.index].classList.add('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.add('active')
            }
            this.dom.querySelector('.right').onclick=()=>{
                clearInterval(this.timerid)
                this.dom.querySelectorAll('.image img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.remove('active')
                this.index++
                if(this.index > this.data.length-1){
                    this.index=0
                }
                this.dom.querySelectorAll('.image img')[this.index].classList.add('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.add('active')
            }

            this.dom.querySelector('.dot ul').onclick=()=>{
                // clearInterval(this.timerid)
                console.log('点击了');
                for(let i=0;i<this.data.length;i++){
                    this.dom.querySelectorAll('.image img')[i].classList.remove('active')
                    this.dom.querySelectorAll('.dot li')[i].classList.remove('active')
                }
                this.dom.querySelectorAll('.image img')[this.index].classList.add('active')
                this.dom.querySelectorAll('.dot li')[this.index].classList.add('active')
            }

        }
    }
    var arr1=['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg','./images/6.jpg','./images/7.jpg','./images/8.jpg','./images/9.jpg','./images/10.jpg','./images/11.jpg','./images/12.jpg','./images/13.jpg']
    var a1 = new Swiper('.swiper1',arr1)
</script>